<template>
   <div class="pages">
     <div style="box-sizing: border-box;padding:0 20rpx;background-color: #fff">
<!--       <van-icon name="arrow-left" size="20" style="position: absolute;top:20rpx;left:20rpx;" v-if="typeArr.length>=2" @click="goBack"/>-->
<!--       <van-button type="primary" size="small" style="margin-right: 30rpx" @click="goHome">返回顶级分类</van-button>-->
       <van-button type="info" size="small" @click="goBack" v-if="typeArr.length>1">返回上一级</van-button>
     </div>
     <div class="product">
       <ul class="product_list" >
         <li v-for="(a,i) in detailListCopy" :key="i" @click="goDetail(a)">
           <van-icon name="new-arrival" v-if="a.label" color="#FF0000" size="70rpx" style="position: absolute;top: -10rpx;"/>
           <span class="cartNum" v-if="a.hasChildren">{{a.hasChildren}}张</span>
           <img :src="a.simplename" alt="" height="150" mode="aspectFill">
           <!--          <van-image-->
           <!--            width="100"-->
           <!--            height="100"-->
           <!--            :src="a.imgUrls"-->
           <!--          />-->
           <p  style="word-break:keep-all;text-overflow: ellipsis;overflow: hidden;">{{a.description||'敬请期待'}}<van-icon color="#CC0000" v-if="a.hasChildren" size="14" name="play-circle" /></p>
         </li>

       </ul>

     </div>
     <getUserinfo ref="getUserinfo"  ></getUserinfo>
   </div>
</template>

<script>
  import getUserinfo from '../../components/getUserinfo'
    export default {
        name: "index",
        data(){
            return {
                pageNum:1,
                pageSize:10,
                typeArr:[0],
              iscurrPage:"",
                id:"",
              isCard:0,
                result:[],
              userInfoShow:false,
                detailListCopy: [

                ],
            }
        },
        onPullDownRefresh(){
           // console.log('down')

                this.pageNum=1;

            this.getList( this.typeArr[ this.typeArr.length-1])

        },
        onReachBottom () {
            // wx.showNavigationBarLoading()
           // console.log('pull')
            if(this.result.length){
                this.pageNum++;
            }
            this.getList( this.typeArr[ this.typeArr.length-1])
            // wx.stopPullDownRefresh()
        },
        onLoad (id) {
          //  console.log(id)
            this.id = id.id;
            this.isCard=id.isCard;

            //console.log(this.id)
          this.typeArr=[this.id];
        },
      // onReady(){

      // },
        onReady () {
            wx.setNavigationBarTitle({
                title: '产品中心'
            })
          this.userInfoShow=false;
          this.id=this.typeArr[this.typeArr.length-1]
          // this.typeArr.splice(this.typeArr.length-1,1)
          //   this.typeArr.push(this.id)
            this.pageNum=1;
            this.getList (this.id)
            // this.getListData()

            // this.isVip=""
        },
         components:{
           getUserinfo
         },
        methods:{
            goBack(){

                this.pageNum=1;


                this.typeArr.splice(this.typeArr.length-1,1)
                let index=this.typeArr[this.typeArr.length-1];
                this.getList(index)
             //   console.log(index)

            },
            goDetail (a) {
              let userInfo = wx.getStorageSync('userInfo')
                    if(a.hasChildren){
                      this.pageNum=1;
                        this.typeArr.push(a.id)
                        this.getList(a.id)
                     //   console.log(this.typeArr)
                        // wx.navigateTo({
                        //     url: '/pages/productCartDetail/main?id=' + a.id
                        // })
                    }else{
                      if(userInfo){
                        wx.setStorageSync('list',JSON.stringify(this.detailListCopy))
                        wx.navigateTo({
                          url: '/pages/productDetail/main?id=' + a.id
                        })
                      }else{
                        this.$refs.getUserinfo.init()
                      }

                    }



            },
            getList (id) {
              let cartId=0;
           //   console.log(this.isCard)
              if(this.isCard!=0){
                cartId = wx.getStorageSync('cartId')
              }else{
                cartId = wx.getStorageSync('cartId1')
              }

                this.$http.request({
                    method: 'post',
                    url: `/api/material/getChildPList`,
                    body: {
                        cardId:cartId,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        pid:id||0
                    }
                }).then((data) => {
                    if (data.code == 200) {
                       wx.stopPullDownRefresh()
                        this.result=data.data.list;
                        if (this.pageNum > 1) {
                            this.detailListCopy.push(... data.data.list)
                        }else{
                            this.detailListCopy = data.data.list;
                        }

                    } else {
                        wx.showToast({
                            title: `${data.message}`,
                            icon: 'none',
                            duration: 2000
                        })
                    }
                }).catch((err) => {
                    // this.isCart = false
                })
            },
        }
    }
</script>

<style scoped>
   .pages{
     width: 100%;
     height: 100%;

   }
   .product {
     width: 100%;
     background: #fff;
     box-sizing: border-box;
     padding:20rpx;
     font-size: 28rpx;
   }

   .product>.product_list {
     width: 100%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
   }

   .product>.product_list>li {
     width: 45%;
     box-sizing: border-box;
     border-radius: 20rpx;
     margin-bottom: 30rpx;
     box-shadow: 5px 5px 5px rgb(251, 251, 251);
     position: relative;
   }
   .product_list .cartNum{
     position: absolute;
     bottom:56rpx;
     right: 0;
     color: #fff;
     font-weight: bold;



   }
   .product>.product_list>li>p {
     text-align: center;
   }

   .product>.product_list>li>img {
     border: 1px solid #ddd;
     width: 100%;
     height: 150px;
   }

</style>
